// 构造函数
function Pages(obj){
    this.el = this.getEl(obj.el)
    this.num = obj.num
    this.init()
}

Pages.prototype.init = function(){
    this.render()
    this.clickFn()
}
// 渲染数据
Pages.prototype.render = function(){
    let spans = ''
    if(this.$('.active')&&this.curI === 5){
        let val = this.$('.active').innerHTML*1
        for(i=val;i<val+5;i++){
            spans+= `<li >${i+1}</li>`
        }
        this.curI = 0
        
    }else if(this.$('.active')&&this.$('.active').innerHTML !== '1'){
        let val = this.$('.active').innerHTML*1
        for(i=val-6<0?0:val-6;i< (val-6< 0 ? 5 : val-1);i++){
            spans+= `<li >${i+1}</li>`
        }
        this.curI = 4
    }else{
        for(i=0;i<5;i++){
            spans += `<li >${i+1}</li>`
        }
        this.curI = 0
    }
    this.$('.page').innerHTML = spans+`<li class="nobk">...</li><li>${this.num}</li>`
    this.list = [...this.$('.page').children]
    this.list[this.curI].classList.add('active')
    if(this.$('.active').innerHTML === '1' ) this.$('.prev').classList.add('stop')
}
// 点击事件
Pages.prototype.clickFn = function(){
    this.prev()
    this.page()
    this.next()
    this.ok()
}
// page点击高亮
Pages.prototype.page = function(){
    this.$('.page').addEventListener('click',(e)=>{
        let target = e.target
        if(target.nodeName == 'LI'){
            if(target.classList.contains('nobk')) return
            this.curI = this.list.indexOf(target)
            this.$('.active').classList.remove('active')
            this.list[this.curI].classList.add('active')
            this.$('.next').classList.remove('stop')
            this.$('.prev').classList.remove('stop')
            if(this.$('.active').innerHTML === '1') this.$('.prev').classList.add('stop')
            if(this.$('.active').innerHTML == this.num ) this.$('.next').classList.add('stop')
        } 
    })
    
}
// 上一页
Pages.prototype.prev = function(){
    this.$('.prev').addEventListener('click',()=>{
        if(this.$('.active').innerHTML !== this.num ) this.$('.next').classList.remove('stop')
        this.curI = this.list.indexOf(this.$('.active'))
        if(this.curI === 0 ){
            if(this.$('.active').innerHTML === '1'){
                this.$('.prev').classList.add('stop')
                this.curI = 0
                return
            }else{
                this.render()
                return
            }
        }
        this.curI--
        this.$('.active').classList.remove('active')
        this.list[this.curI].classList.add('active')
    }) 
}
// 下一页
Pages.prototype.next = function(){
    this.$('.next').addEventListener('click',()=>{
        this.$('.prev').classList.remove('stop')
        this.curI++
        if(this.curI === 5){
            this.render()
        }
        this.$('.active').classList.remove('active')
        this.list[this.curI].classList.add('active')
    })
}
Pages.prototype.ok = function(){
    let inp = this.$('input').value
    this.$('input').addEventListener('input',()=>{
        console.log(inp,this.$('input')) 
    })
    
}
// 获取元素
Pages.prototype.$ = function(el,parent){
    parent = parent || document;
    return parent.querySelector(el);
}
Pages.prototype.gets = function(el,parent){
    parent = parent || document;
    return [...parent.querySelectorAll(el)]
}
// 判断传入参数是否正确
Pages.prototype.getEl = function(el){
    if ( el.nodeType === 1 ){
        return el
    }else if ( typeof el === "string" ){
        return this.$(el)
    }else {
        throw new Error("el参数不正确")
    }
}
// 实例化对象
new Pages({
    el : '.box',
    num : 50
})